<html>
  <head>
    <title></title>
    <style type="text/css">
        .movable {
            position: absolute;
            width: 19px;
            height: 19px;
            background-color: yellow;
            cursor:pointer;
            border:solid 1px gray;
            z-index:1;
        }
    </style>
  </head>
  <body>
    <h2>Game of Life</h2>
    <div id="setup-panel">
    <table border="0" cellspacing="1" cellpadding="4">
    <tr>
    <td>#rows</td>
    <td>#columns</td>
    <td>#isolates</td>
    <td></td>
    </tr>
    <tr>
    <td><input type="text" id="rows" value="10"/></td>
    <td><input type="text" id="cols" value="20"/></td>
    <td><input type="text" id="isols" value="5"/></td>
    <td><button id="setup-button" type="button">Setup</button></td>
    </tr>
    </table>
    </div>
    <div id="game-panel" style="display:none;">
    <button id="run-button" type="button">Run</button>
    <table border="1" cellspacing="1" cellpadding="2">
    <tr>
    <td>#alive cells</td>

    </tr>
    <tr>
    <td><div id="alive">&nbsp;</div></td>
    </tr>
    </table>
    </div>
    <div style="top:20; left:700; position:absolute;">
    <h4>Rules (from Wikipedia):</h4>
<ol>
<li>Any live cell with fewer than two live neighbours dies, as if caused by under-population.</li>
<li>Any live cell with two or three live neighbours lives on to the next generation.</li>
<li>Any live cell with more than three live neighbours dies, as if by overcrowding.</li>
<li>Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.</li>
</ol>
<table>
<tr colspan="2">
<td>
<table class="wikitable">
<tbody><tr>
<th colspan="2">Spaceships</th>
</tr>
<tr>
<td>Glider</td>
<td><img alt="Game of life animated glider.gif" src="http://upload.wikimedia.org/wikipedia/commons/f/f2/Game_of_life_animated_glider.gif" width="84" height="84"></td>
</tr>
<tr>
<td>Lightweight spaceship (LWSS)</td>
<td><img alt="Game of life animated LWSS.gif" src="http://upload.wikimedia.org/wikipedia/commons/3/37/Game_of_life_animated_LWSS.gif" width="126" height="98"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<table>
<tbody><tr>
<th colspan="2">Still lifes</th>
</tr>
<tr>
<td>Block</td>
<td><img alt="Game of life block with border.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Game_of_life_block_with_border.svg/66px-Game_of_life_block_with_border.svg.png" width="66" height="66"></td>
</tr>
<tr>
<td>Beehive</td>
<td><img alt="Game of life beehive.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Game_of_life_beehive.svg/98px-Game_of_life_beehive.svg.png" width="98" height="82"></td>
</tr>
<tr>
<td>Loaf</td>
<td><img alt="Game of life loaf.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Game_of_life_loaf.svg/98px-Game_of_life_loaf.svg.png" width="98" height="98"></td>
</tr>
<tr>
<td>Boat</td>
<td><img alt="Game of life boat.svg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Game_of_life_boat.svg/82px-Game_of_life_boat.svg.png" width="82" height="82"></td>
</tr>
</tbody></table>
</td><td>
<table>
<tbody><tr>
<th colspan="2">Oscillators</th>
</tr>
<tr>
<td>Blinker (period 2)</td>
<td><img alt="Game of life blinker.gif" src="http://upload.wikimedia.org/wikipedia/commons/9/95/Game_of_life_blinker.gif" width="82" height="82"></td>
</tr>
<tr>
<td>Toad (period 2)</td>
<td><img alt="Game of life toad.gif" src="http://upload.wikimedia.org/wikipedia/commons/1/12/Game_of_life_toad.gif" width="98" height="98"></td>
</tr>
<tr>
<td>Beacon (period 2)</td>
<td><img alt="Game of life beacon.gif" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Game_of_life_beacon.gif" width="98" height="98"></td>
</tr>
<tr>
<td>Pulsar (period 3)</td>
<td><img alt="Game of life pulsar.gif" src="http://upload.wikimedia.org/wikipedia/commons/0/07/Game_of_life_pulsar.gif" width="137" height="137"></td>
</tr>
</tbody></table>
</td>
</tr>
</table>
    </div>
    <script type="application/dart" src="life.dart"></script>
  </body>
</html>


